<template>
  <div class="drawer-title-container" v-loading="loading">
    <div class="sub" v-if="Object.is(activeTab, 'Subtask')">
      <img
        @click.stop="goSubView(record)"
        style="display: inline-block; margin-right: 3px; cursor: pointer"
        src="@/assets/wbs/sub.svg"
        alt=""
      />
      <div class="text-container">{{ subTaskNameList ?? "" }}</div>

      <el-tooltip placement="right" effect="light">
        <template #content>
          <div class="sub-content">
            <div
              v-for="item in childrenList ?? record?.children ?? []"
              :key="item.id"
              class="sub-content-item"
              @click.stop="goSubView(item)"
            >
              <img
                style="
                  display: inline-block;
                  margin-right: 3px;
                  cursor: pointer;
                "
                src="@/assets/wbs/sub.svg"
                alt=""
              />
              <div>{{ item.name?.["zh_CN"] ?? item.name }}</div>
            </div>
          </div>
        </template>
        <div class="sub-relate">
          <img
            style="display: inline-block; margin-right: 3px"
            src="@/assets/wbs/subRelate.svg"
            alt=""
          />
          <span
            >{{ (childrenList ?? record?.children)?.length ?? 0 }}子任务</span
          >
        </div>
      </el-tooltip>
    </div>
    <div class="drawer-title">
      <div v-if="!showEdit" @dblclick.stop="reName" class="name">
        {{ newName || "未命名任务" }}
      </div>
      <el-input
        v-else
        v-model="newName"
        style="width: 200px; border: none"
        placeholder="Please input"
        type="text"
        @blur="blur"
      />

      <el-tooltip placement="bottom" effect="light" trigger="click">
        <template #content>
          <div
            class="content-item"
            v-for="item in detail?.transferEdge ?? []"
            :key="item.id"
            @click.stop="changeState(item)"
          >
            <div :style="{ color: item?.fromNode?.color }">
              {{ item?.fromNode?.name?.["zh_CN"] ?? "" }}
            </div>
            <div class="content-item-mid">
              <div :style="{ color: item.color }">
                {{ item?.name?.["zh_CN"] }}
              </div>
              <img
                style="display: inline-block; margin-right: 3px"
                src="@/assets/wbs/rightLine.svg"
                alt=""
              />
            </div>
            <div :style="{ color: item?.toNode?.color }">
              {{ item?.toNode?.name?.["zh_CN"] ?? "" }}
            </div>
          </div>
        </template>
        <el-button
          size="small"
          text
          bg
          class="drawer-title-status"
          style="
            color: rgba(190, 90, 0, 1);
            background-color: rgba(255, 238, 227, 1);
          "
          ><div>{{ detail?.status || "未开始" }}</div>
          <el-icon style="margin-left: 5px"><ArrowDown /></el-icon
        ></el-button>
      </el-tooltip>
    </div>
    <!--在这显示获取到的人物头像和名称-->
    <div class="user-info-container">
      <div class="user-info">
        <img :src="detail?.creatorObject?.avatar" alt="用户头像" />
        <div>
          <span class="user-name">{{ detail?.creatorName }}</span>
          <span class="user-date">{{ detail?.createTime }} 创建</span>
        </div>
      </div>
      <div class="user-info">
        <img :src="detail?.creatorObject?.avatar" alt="用户头像" />
        <div>
          <span class="user-name">{{ detail?.modifierName }}</span>
          <span class="user-date">{{ detail?.modifyTime }} 更新</span>
        </div>
      </div>
    </div>

    <!-- 不符合状态得弹窗 -->
    <el-dialog v-model="visible" title="变更状态" width="500" append-to-body>
      <div class="check-container">
        <div class="check-detail">
          <div class="check-detail-item">
            <div style="margin-right: 10px; width: 100px">当前项目</div>
            <div>2部-SDM仿真项目及数据管理- R5【Rowan-Dante】</div>
          </div>
          <div class="check-detail-item">
            <div style="margin-right: 10px; width: 100px">当前任务类型</div>
            <div>任务类型1</div>
          </div>
          <div class="check-detail-item">
            <div style="margin-right: 10px; width: 100px">当前状态</div>
            <div>进行中</div>
          </div>
        </div>
        <div></div>
        <div></div>
      </div>
      <template #footer>
        <div class="footer">
          <el-button size="small" @click.stop="handleCancel">取消</el-button>
          <el-button size="small" type="primary" @click="handleSure">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from "vue";
  import { ArrowDown } from "@element-plus/icons-vue";
  import { ElMessage } from "element-plus";
  const props = defineProps([
    "record",
    "detail",
    "activeTab",
    "nameChange",
    "childrenList",
  ]);
  import {
    editTask,
    getTaskDetail,
    checkChangeState,
    getPermission,
  } from "./api.ts";
  import { useRouter } from "vue-router";

  const router = useRouter();
  const loading = ref(false);
  const newName = ref(
    props?.detail?.name?.["zh_CN"] || props?.detail?.name || "",
  );
  const showEdit = ref(false);
  const visible = ref(false);

  const subTaskNameList = computed(() =>
    (props?.childrenList ?? props.record?.children)
      ?.map((ele: any) => ele?.name?.["zh_CN"] ?? ele.name)
      .toString(),
  );

  /**
   * @description 获取权限
   */
  const havePermission = async () => {
    try {
      const res = await getPermission(props.detail?.projectId, "TASK_SUB");
      return res;
    } catch (error) {
      return false;
    }
  };

  /**
   * @description 跳转子任务页面  --新页签
   */
  const goSubView = async (item: any) => {
    const flag = await havePermission();
    if (flag) {
      const href = router.resolve({
        name: "SubTaskView",
        query: {
          projectId: props.detail.projectId,
          taskId: item.id,
        },
      });
      window.open(href.href, "_blank");
    } else {
      ElMessage.error("⽆权限，需向管理员申请权限");
    }
  };

  /**
   * @description 处理取消
   */
  const handleCancel = () => {
    visible.value = false;
  };

  /**
   * @description 处理确定
   */
  const handleSure = () => {
    visible.value = false;
  };

  /**
   * @description 处理刷新问题
   */
  const refresh = async () => {
    loading.value = true;
    try {
      const res = await getTaskDetail(props?.detail?.id);
      newName.value = res?.name?.["zh_CN"] ?? "";
      // 通知父级组件同步列表
    } catch (error) {
    } finally {
      loading.value = false;
    }
  };
  /**
   * @description 重命名
   */
  const reName = () => {
    showEdit.value = true;
  };

  /**
   * @description 输入框失去焦点
   */
  const blur = async () => {
    loading.value = true;
    try {
      props.nameChange({
        ...(props?.detail ?? {}),
        name: {
          zh_CN: newName.value,
        },
      });
      await editTask({
        ...(props?.detail ?? {}),
        name: {
          zh_CN: newName.value,
        },
      });
      showEdit.value = false;

      refresh();
    } catch (error) {
    } finally {
      loading.value = false;
    }
  };

  /**
   * @description 切换状态
   */
  const changeState = async (item: any) => {
    loading.value = true;
    try {
      const res = await checkChangeState("TASK", props?.detail?.id, item.id);
      console.log(res, "ddd");
    } catch (error) {
      visible.value = true;
    } finally {
      loading.value = false;
    }
  };
</script>

<style scoped lang="scss">
  .text-container {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sub {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 13px;
    color: #0c0d0e;
  }
  .sub-relate {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #8f969f;
    background-color: #f6f7fa;
    border-radius: 4px;
    padding: 2px 3px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 5px;
  }

  .sub-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .sub-content-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      cursor: pointer;
      padding: 5px;
      &:hover {
        border-radius: 4px;
        background: #f6f7fa;
      }
    }
  }
  .content-item {
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    &:hover {
      background-color: #f2f2f2;
    }
    .content-item-mid {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0px 4px;
    }
  }
  .drawer-title-container {
    box-sizing: border-box;
    margin-bottom: 15px;
    .drawer-title {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      height: 24px;
      margin-bottom: 7px;
      .name {
        max-width: 200px;
        font-size: 23px;
        font-weight: 600;
        cursor: pointer;
        color: #1d2129;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .drawer-title-status {
        background-color: #ffeee3;
        font-size: 13px;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        margin-left: 5px;
      }
    }
    .parent-record-name {
      font-size: 14px;
      font-weight: 500;
      padding: 0 0 10px 10px;
    }
    .user-info-container {
      display: flex;
      flex-direction: row;
      font-size: 12px;
      color: #86909c;
      .user-info {
        display: flex;
        align-items: center;
        margin-right: 10px;

        img {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          font-weight: 500;
        }

        .user-name {
          font-weight: 400;
          margin-left: 5px;
        }

        .user-date {
          margin-left: 5px;
          font-weight: 400;
        }
      }
    }
    img {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      object-fit: cover;
    }
  }

  .check-container {
    box-sizing: border-box;
    .check-detail {
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      padding: 5px;
      background: #f8f8f8;
      .check-detail-item {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }
  }
</style>
